/* component */
import { BaseSelectUserFilterFormItem } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserFormField } from '@src/component/common/BaseSelectUser/components/Form/hooks'
/* model */
import { BaseSelectUserFormField } from '@src/component/common/BaseSelectUser/components/Form/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/Form/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
import KeyCodeEnum from '@model/enum/KeyCodeEnum'

export type FormTextFieldProps = {
  field: BaseSelectUserFormField;
  value: string;
}

export interface FormTextFieldSetupState {
  
}

export enum FormTextFieldEmitEventNameEnum {
  Input = 'input',
  Enter = 'enter',
}

export type FormTextFieldInstance = ComponentInstance & FormTextFieldSetupState
export type FormTextFieldVM = ComponentRenderProxy<FormTextFieldProps> & CommonComponentInstance & FormTextFieldInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserFormTextField,
  emits: [
    FormTextFieldEmitEventNameEnum.Input,
    FormTextFieldEmitEventNameEnum.Enter,
  ],
  props: {
    field: {
      type: Object as PropType<BaseSelectUserFormField>,
      default: () => ({}),
      required: true
    },
    value: {
      type: String as PropType<string>,
      default: '',
      required: true
    }
  },
  setup(props: FormTextFieldProps, { emit }) {
    
    const { label, placeholder } = useBaseSelectUserFormField(props)
    
    const onChangeHandler = (value: string) => {
      emit(FormTextFieldEmitEventNameEnum.Input, value)
    }
    
    const onEnterHandler = () => {
      emit(FormTextFieldEmitEventNameEnum.Enter)
    }
    
    return {
      label,
      placeholder,
      onChangeHandler,
      onEnterHandler
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserFormTextField}>
        
        <BaseSelectUserFilterFormItem 
          label={this.label}
        >
          <el-input 
            clearable
            value={this.value} 
            placeholder={this.placeholder}
            onInput={this.onChangeHandler}
            nativeOnKeyup={(event: KeyboardEvent) => {
              // 回车搜索 (暂时先这么蠢)
              if (event.keyCode === KeyCodeEnum.Enter) {
                this.onEnterHandler()
              }
            }}
          >
          </el-input>
        </BaseSelectUserFilterFormItem>
        
      </div>
    )
  }
})
